<template>
  <div id="app">

    <div class="nav-box">
      <ul class="nav">
        <router-link to="/" exact tag="li" event="mouseover">
          <i class="fa fa-home"></i>
          <span>home</span>
        </router-link>
        <li>
          <router-link to="/document">document</router-link>
        </li>
        <li>
          <router-link :to="{path:'/about'}" active-class="activeClass">about</router-link>
        </li>
        <li>
          <router-link to="/user">user</router-link>
        </li>
      </ul>
    </div>

    <input type="button" value="后退" @click="backHandle">
    <input type="button" value="前进" @click="forwardHandle">
    <input type="button" value="控制前进后退的步数125" @click="goHandle">
    <input type="button" value="控制前进后退的步数push" @click="pushHandle">
    <input type="button" value="控制前进后退的步数replace" @click="replaceHandle">

    <transition :name="names" > <!-- out-in使用较多，是当前元素先过渡     in-out 是先过渡新元素，在过渡要离开的元素-->
      <router-view  class="center"></router-view>
    </transition>
    <router-view  name="slide"></router-view>

    
  </div>
</template>

<script>
export default {
  name: 'App',
  watch: {
    $route(to,from){
//    console.log(to.meta.index)
//    console.log(from.meta.index)
      if(to.meta.index < from.meta.index){
        this.names = 'right'
      }else{
        this.names = 'left'
      }

    }
  },
  data () {
    return {
      index: '/home',
      names: 'left'
    }
  },
  methods: {
  	backHandle(){
  		this.$router.back()
  	},
  	forwardHandle(){
  		this.$router.forward()
  	},
  	goHandle(){
//		this.$router.go(-3)   //负数是   后退 的步数 
//			this.$router.go(3)    //正数是前进 的步数 
			this.$router.go(0)     //0是刷新当前页面
  	},
  	pushHandle(){
  		this.$router.push({path:'/document'})
  	},
  	replaceHandle(){
  		this.$router.replace({path:'/document'})
  	}
  }
}
</script>

<style>
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: 1s;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: 2s;
}


.left-enter {
  transform: translateX(100%);
}
.left-enter-active,
.left-leave-active {
  transition: 1s;
}
.left-leave-to {
  transform: translateX(-100%);
}




.right-enter {
  transform: translateX(-100%);
}
.right-enter-active,
.right-leave-active {
  transition: 1s;
}
.right-leave-to {
  transform: translateX(100%);
}
</style>
